<template>
  <h3>组合式api :props</h3>
  <div>
    <h3 @click="editTitle">{{ tle }}</h3>
    <p>props.title ： {{ props.title }}</p>
    <p>props.des ： {{ props.des }}</p>
    <p>props.dao ： {{ props.dao.name }}</p>
    <p>props.user ： {{ props.user.sex }}</p>
    <p>props.des2 ： {{ props.des2 }}</p>
  </div>
  <div v-show="isShow" class="isShowHide">显示或隐藏</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  des: {
    type: [Number, String],
    default: 'des的默认值',
  },
  dao: {
    type: Object,
    default() {
      return {
        name: '青龙偃月刀',
      };
    },
  },
  user: {
    type: Object,
    default(rawProps: any) {
      console.log(rawProps);
      return {
        name: '小度小度' + rawProps.title,
        sex: 1,
      };
    },
  },
  des2: {
    type: [String, Number],
    default: 'des2默认值',
  },
  propH: {
    type: Function,
    default() {
      console.log('子组件props函数被调用');
      return 'Default function';
    },
  },
});

const tle = ref(props.title)
const isShow = ref(false)
const sonTitle = ref('我是子组件定义的标题 sonTitle')


const editTitle = () => {
  tle.value = '可以修改被props的值初始化后的状态变量'
  props.propH(sonTitle.value,showHander)
}

const showHander = () => {
  isShow.value = !isShow.value
}
</script>
<style lang="scss">
.isShowHide {
  height: 100px;
  width: 100px;
  background-color: cyan;
}
</style>
